<template>
  <div>
    <p>{{ msg }}</p>
    <p>{{ age }}</p>
    <p>{{ obj.name }}</p>
    <p>{{ age >= 18 ? '已成年' : '未成年'}}</p>
    <a :href="url">百度一下</a>
    <img :src="imgUrl" alt="">
    <p>{{ count }}</p>
    <button v-on:click="count = count + 1">+1</button>
    <button v-on:click="addFn">函数</button>
    <button v-on:click="addCountFn(5)">+5</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '你好呀！',
      age: 19,
      count: 1,
      obj: {
        name: '时光穗'
      },
      url: 'http://www.baidu.com',
      imgUrl: 'http://yun.itheima.com/Upload/./Images/20210412/60741c11ab77b.jpg '
    }
  },
  methods: {
    addFn() {
      this.count++
    },
    addCountFn(num) {
      this.count += num
    }
  }
}
</script>

<style lang = "less">
body{
  p {
    color: red;
  }
}
</style>
